<template>
  <div class="addGoodsAdd">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="topTitle"
      :show-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <!-- 点击上面的新增   编辑 -->
      <div class="newAddEdit" style="margin: 0 auto; width: 80%">
        <div class="newAddConfig">
          <el-form
            :model="editCartGoodsData"
            ref="editCartGoodsData"
            class="demo-dynamic"
            label-width="180px"
          >
            <el-form-item
              prop="name"
              label="组合购链路名称"
              :rules="[
                {
                  required: true,
                  message: '请输入组合购链路名称',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-clear-emoij
                maxlength="40"
                v-model="editCartGoodsData.name"
                style="width: 63%"
              ></el-input>
            </el-form-item>

            <el-form-item
              prop="code"
              label="code"
              :rules="[
                {
                  required: true,
                  message: '请输入纯英文数字的code',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                oninput="value=value.replace(/[\u4e00-\u9fa5/\s+/]|[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')"
                placeholder="请输入纯英文数字的code"
                v-model="editCartGoodsData.code"
                style="width: 63%"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="extensionParams.price"
              label="列表页价格"
              :rules="[
                {
                  required: true,
                  message: '请输入列表页价格',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                min="0"
                placeholder="请输入列表页价格"
                maxlength="10"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="editCartGoodsData.extensionParams.price"
                style="width: 63%"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="百草味旗舰店链接"
              :rules="[
                {
                  required: true,
                  message: '请输入百草味旗舰店链接',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                placeholder="请输入百草味旗舰店链接"
                v-model="editCartGoodsData.urls[0].url"
                style="width: 63%"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="百事集团官方旗舰店链接"
              :rules="[
                {
                  required: true,
                  message: '请输入百事集团官方旗舰店链接',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                placeholder="请输入百事集团官方旗舰店链接"
                v-model="editCartGoodsData.urls[1].url"
                style="width: 63%"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="百事饮品旗舰店链接"
              :rules="[
                {
                  required: true,
                  message: '请输入百事饮品旗舰店链接',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                placeholder="请输入百事饮品旗舰店链接"
                v-model="editCartGoodsData.urls[2].url"
                style="width: 63%"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="桂格旗舰店链接"
              :rules="[
                {
                  required: true,
                  message: '请输入桂格旗舰店链接',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                placeholder="请输入桂格旗舰店链接"
                v-model="editCartGoodsData.urls[3].url"
                style="width: 63%"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-row
              v-for="(item, index) in editCartGoodsData.extensionParams.item"
              :key="index"
            >
              <el-row>
                <el-col>
                  <div style="color: #101010; font-weight: bold">
                    <span>第{{ index + 1 }}项商品</span>
                  </div>
                  <el-form-item
                    :prop="`extensionParams.item.${index}.commends`"
                    label="商品名称"
                    :rules="[
                      {
                        required: true,
                        message: '请输入商品名称',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      placeholder="请输入商品名称"
                      maxlength="40"
                      v-model="item.commends"
                      style="width: 63%"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    :prop="`extensionParams.item.${index}.itemId`"
                    label="itemID"
                    :rules="[
                      {
                        required: true,
                        message: '请输入itemID',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      placeholder="请输入itemID"
                      maxlength="70"
                      v-model="item.itemId"
                      style="width: 63%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-row>
            <el-form-item style="margin-top: 40px">
              <el-button type="danger" @click="closeDialog()">取消</el-button>
              <el-button
                type="primary"
                @click="confirmAddConfig('editCartGoodsData')"
                >确认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import requestAxios from "../../../http";
export default {
  name: "groupEdit",
  data() {
    return {
      dialogFormVisible: true, //背景遮罩层
      topTitle: "编辑组合购专属链路", //弹出框上面的标题
      editCartGoodsData: {
        code: "",
        name:"",
        extensionParams: {
          price: "",
          item: [
            {
              itemId: "",
              commends: "",
              quantity: "",
            },
            {
              itemId: "",
              commends: "",
              quantity: "",
            },
          ],
        },
        urls: [
          {
            url: "", //百草味旗舰店
          },
          {
            url: "", //百事集团官方旗舰店
          },
          {
            url: "", //百事饮品旗舰店
          },
          {
            url: "", //桂格旗舰店
          },
        ],
      }, //点击,新增下一个页面要展示出来的数据 //要编辑的列表部分的内容
      uploadUrl: "",
      item: [],
    };
  },
  props: ["addOrEdit", "editGoodsCont"],

  mounted() {
    this.uploadUrl = window.uploadUrl;
    this.editCartGoodsData = this.$props.editGoodsCont;
    console.log(this.editCartGoodsData, "获取列表数据");
  },
  methods: {
    closeDialog() {
      console.log("关闭弹窗");
      this.$parent.addOrEdit = 0;
    },

    //新增确定调取接口
    confirmAddConfig(formName) {
      console.log(formName, "wwww");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = this.editCartGoodsData;
          requestAxios
            .fetchPost("/api/v2.1/trackingProjectChannel/update", obj, {
              headers: {},
            })
            .then((data) => {
              if (data.status == 200 && data.data.success) {
                console.log("新增兑换商品结果", data.data);
                //新增成功
                this.$emit("getAddGoodsList");
                this.tip(true, "编辑加购商品成功!");
                this.$parent.addOrEdit = 0;
              } else {
                this.tip(false, data.data.errorMsg || data.data.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          // 获取图形验证码
          this.$message.error("请完善商品信息！");
          return false;
        }
      });
    },
    //提示的通用方法
    tip(state, text) {
      if (state) {
        this.$message({
          showClose: true,
          message: text,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: text,
          type: "error",
        });
      }
    },
  },
};
</script>
<style>
.addGoodsAdd .close_boun {
  position: absolute;
  font-size: 26px;
  color: white;
  top: 15px;
  right: 10px;
}
.configBounDele {
  margin-right: 46px;
}
.el-icon-error {
  margin-left: 50px;
  font-size: 17px;
  color: rgb(133, 131, 131);
}
.enterInput {
  width: 51%;
  outline: none;
  padding-left: 7px;
}
.disApperInput {
  margin-left: 13%;
}
.disApperInput input {
  outline: none;
}
.closeSelect {
  width: 27%;
  height: 22px;
  padding-left: 7px;
  display: inline-block;
  margin-right: 10%;
  position: relative;
  margin-bottom: 10px;
}
.selectListX {
  /* width: 70%; */
  margin-left: 12%;
}
.selectListX .el-icon-close {
  position: absolute;
  top: 5px;
  left: 130px;
}
.selectListX .closeSelect:nth-child(2n) {
  margin-right: 0;
}
.affirmAddCancel .el-button--danger:focus,
.affirmAddCancel .el-button--danger {
  width: 93px;
  background: white;
  color: #d4af82;
  border: 1px solid #d4af82;
  margin-right: 20px;
}
.clickUpload {
  display: block;
  width: 93px;
  color: #d4af82;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  border: 1px solid #d4af82;
  text-align: center;
  margin-left: 22%;
}
.affirmAddCancel {
  margin-top: 40px;
  text-align: center;
}
.affirmAddCancel .el-button--primary {
  width: 93px;
  /* background: #d4af82; */
  border: none;
}
.el-dialog__header {
  background: #77b3a1;
  text-align: center;
}
.el-dialog__title {
  color: white;
}
.el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 26px;
}

/*
传图页面的样式
*/
.uploadPicList {
  height: 100px;
  display: flex;
}
.picCommodity {
  height: 100px;
  display: inline-block;
  width: 380px;
  position: relative;
}
.uploadPicName {
  display: inline-block;
  margin-left: 100px;
  width: 150px;
  line-height: 100px;
}
.picCommodity .imgDelete {
  /* color: #d4af82; */
  position: absolute;
  left: -68px;
  top: -7px;
}
.picCommodity img {
  position: absolute;
  left: 0px;
  top: 0px;
}
/* 确定和取消按钮 */
.configUploadPage .affirmAddCancel .el-button--danger:focus,
.configUploadPage .affirmAddCancel .el-button--danger {
  width: 93px;
  background: white;
  /* color: #d4af82;
  border: 1px solid #d4af82; */
  margin-right: 20px;
}
.configUploadPage .affirmAddCancel .el-button--primary {
  width: 93px;
  /* background: #d4af82; */
  border: none;
}
.configUploadPage {
  width: 80%;
  margin: 0 auto;
}
</style>
